<template>
  <div class="detail">
    <div class="detail-swipe">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item v-for="url in detail.photo" :key="url.id">
          <img :src="url.url" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="detail-intro">
      <h2>{{detail.title}}</h2>
      <div class="detail-info">
        <span>
          ￥ {{detail.price}}
          <del>原价：¥ {{detail.originPrice}}</del>
        </span>
        <span>月销量: {{ detail.saleNum }} + </span>
      </div>
      <ul v-for="shop in detail.descContentList" :key="shop.id" class="shopImg">
          <li>
            <img :src="shop.image.url">
          </li>
      </ul>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/cart" :badge="totalCount | overflow99 "/>
      <van-goods-action-icon icon="star" text="已收藏" />
      <van-goods-action-button color="#769fcd" type="warning" text="加入购物车" @click="addToCart({ detail })"/>
      <van-goods-action-button  color="#bbbfca" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import {
  mapMutations,
  mapGetters
} from 'vuex'
export default {
  data () {
    return {
      id: '',
      detail: {}
    }
  },
  created () {
    this.id = this.$route.query.id
    this.$http.getDetail(this.id)
      .then(resp => {
        console.log(resp)
        const {
          id,
          title,
          photo,
          price,
          saleNum,
          originPrice,
          descContentList
        } = resp.detail
        this.detail = {
          id,
          title,
          photo,
          price,
          saleNum,
          originPrice,
          descContentList
        }
      })
  },
  methods: {
    ...mapMutations(['addToCart'])
  },
  computed: {
    ...mapGetters(['totalCount'])
  }
}
</script>

<style lang="scss" scoped>
.detail {
  line-height: 2;
  &-swipe {
    img {
      width: 100%;
    }
  }
  h3 {
    font-size: 14px;
    color: #495464;
  }
  &-intro {
    padding: 0 10px;
  }
  &-info {
    display: flex;
    justify-content: space-between;
    span:first-child {
      font-size: 16px;
      color: #ee0a24;
      font-weight: bold;
      del {
        font-weight: normal;
        padding-left: 10px;
        color: #999;
      }
    }
    span:last-child {
      font-size: 14px;
      color: #999;
    }
  }
.shopImg{
  img {
    width: 100%;
  }
}
}
</style>
